<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <!-- 编辑 -->
    <a-spin :spinning="confirmLoading" v-if="editStatus">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="客户姓名"
          prop="name"
          required
          hasFeedback>
          <a-input placeholder="请输入客户姓名" v-model="model.name" :readOnly="disableSubmit" />
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="性别"
          hasFeedback>
          <a-select v-model="model.sex" placeholder="请选择性别">
            <a-select-option value="1">男性</a-select-option>
            <a-select-option value="2">女性</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="身份证号码"
          prop="idcard"
          hasFeedback>
          <a-input placeholder="请输入身份证号码" v-model="model.idcard" :readOnly="disableSubmit" />
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="身份证扫描件"
          hasFeedback>
          <j-image-upload text="上传" v-model="fileList" :isMultiple="true"></j-image-upload>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="联系方式"
          prop="telphone"
          hasFeedback>
          <a-input v-model="model.telphone" :readOnly="disableSubmit" />
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="订单号码"
          :hidden="hiding"
          hasFeedback>
          <a-input v-model="model.orderId" disabled="disabled" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import JImageUpload from '../../../../components/jeecg/JImageUpload'

export default {
  name: 'JeecgOrderCustomerModal',
  components: { JImageUpload },
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      fileList: [],
      disableSubmit: false,
      selectedRowKeys: [],
      orderId: '',
      hiding: false,
      headers: {},
      picUrl: '',
      picArray: [],
      previewVisible: false,
      previewImage: '',
      addStatus: false,
      editStatus: false,
      confirmLoading: false,
      url: {
        add: '/test/order/addCustomer',
        edit: '/test/order/editCustomer',
        fileUpload: window._CONFIG['domianURL'] + '/sys/common/upload',
        getOrderCustomerList: '/test/order/listOrderCustomerByMainId'
      },
      validatorRules: {
        name: [{ required: true, message: '请输入客户姓名!' }],
        telphone: [{ validator: this.validateMobile }],
        idcard: [{ validator: this.validateIdCard }]
      }
    }
  },
  computed: {
    uploadAction: function() {
      return this.url.fileUpload
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }
  },
  methods: {
    add(orderId) {
      this.hiding = true
      if (orderId) {
        this.edit({ orderId }, '')
      } else {
        this.$message.warning('请选择一个客户信息')
      }
    },
    detail(record) {
      this.edit(record, 'd')
    },
    edit(record, v) {
      if (v == 'e') {
        this.hiding = false
        this.disableSubmit = false
      } else if (v == 'd') {
        this.hiding = false
        this.disableSubmit = true
      } else {
        this.hiding = true
        this.disableSubmit = false
      }

      this.model = Object.assign({}, record)
      if (record.id) {
        this.hiding = false
        this.addStatus = false
        this.editStatus = true
        setTimeout(() => {
          this.fileList = record.idcardPic
        }, 5)
      } else {
        this.addStatus = false
        this.editStatus = true
      }
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.picUrl = ''
      this.fileList = []
      this.$refs.form.resetFields()
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign({}, this.model)
          if (this.fileList != '') {
            formData.idcardPic = this.fileList
          } else {
            formData.idcardPic = ''
          }
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    },
    validateMobile(rule, value, callback) {
      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
        callback()
      } else {
        callback('您的手机号码格式不正确!')
      }
    },
    validateIdCard(rule, value, callback) {
      if (!value || new RegExp(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(value)) {
        callback()
      } else {
        callback('您的身份证号码格式不正确!')
      }
    }
  }
}
</script>

<style scoped>
/* tile uploaded pictures */
.upload-list-inline > > > .ant-upload-list-item {
  float: left;
  width: 200px;
  margin-right: 8px;
}

.upload-list-inline > > > .ant-upload-animate-enter {
  animation-name: uploadAnimateInlineIn;
}

.upload-list-inline > > > .ant-upload-animate-leave {
  animation-name: uploadAnimateInlineOut;
}
</style>